<template>
  
  <!-- 登录 -->
  
  <div class="login">
     
    <div class="avatar">
         <img src="../../assets/img/dengluye.jpg" alt="" />  
    </div>

     
    <div>
        
      <div v-if="showModal" @click="showModal = false"></div>
        
      <div class="pop" v-if="showModal">
           
        <div class="buttons_1">
              
          <van-icon name="cross" size="40px" color="#999999" @click="close" /> 
            
        </div>
           
        <van-cell-group inset>
              
          <!-- 输入任意文本 -->
              
          <van-field v-model="user.username" placeholder="用户名/手机/邮箱" />     
          <!-- 密码 -->
              
          <van-field v-model="user.password" type="password" placeholder="密码" /> 
            
        </van-cell-group>

           
        <van-row justify="center">
              
          <van-col span="12"
            ><van-button plain type="primary" size="small" color="red"
              >忘记密码</van-button
            ></van-col
          >
              
          <van-col span="12">
                 
            <van-button plain type="primary" size="small" color="red" @click="loginIn"
              >登录</van-button
            ></van-col
          >
             
        </van-row>
          
      </div>
        
      <div class="doubleBtn" v-if="btnView">
            <button @click="login" class="btn1">登录</button>    
        <button class="btn2" @click="jump">注册</button>   
      </div>

      <!-- 第三方登录 -->

      <van-row justify="space-between">
         <van-col span="24">第三方登录</van-col> 
      </van-row>

        
      <div class="icon">
            <van-icon class="iconfont icon-qq" color="#ff5555" />    
        <van-icon class="iconfont icon-weiliao" color="#ff5555" />   
      </div>
       
    </div>
    
  </div>
</template>
<script>
import { getLogin } from "../../api/index";
import { Notify } from "vant";

export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
      active: "",
      showModal: false,
      btnView: true,
    };
  },
  methods: {
    login() {
      this.showModal = true;
      this.btnView = false;
    },
    close() {
      this.showModal = false;
      this.btnView = true;
    },
    //跳转
    jump() {
      this.$router.push("/zhuce");
    },
    async loginIn() {
      try {
        let {
          data: {username, token, id},
          meta: { msg, status }
        } = await getLogin(this.user);
        if (status == 200) {
          this.$store.commit("setToken", token); //vuex
          this.$store.commit("setUserId", id); //vuex
          this.$store.commit("userName", username); //vuex
          // 登录成功提示
          Notify({ type: "success", message: msg });
          // 3 跳转到home 页面
          this.$router.push({ path: "/home" });
          this.$store.commit('setNum', 0)
        } else {
          // 登录失败提示
          Notify({ type: "warning", message: msg });
        }
      } catch (error) {
        console.log(error);
        // throw new Error(error.message);
      }
    },
  },
};
</script>

<style scoped lang="less">
.login {
  position: fixed;
  width: 100%;
  height: 100%;
  .avatar {
    img {
      height: 600px;
    }
  }

  .btn1,
  .btn2 {
    border: 3px solid #ff5654;
    // box-shadow: 0px 0px  10px 5px #fff;
    width: 600px;
    text-align: center;
    height: 90px;
    border-radius: 5px;
    margin: 130px 0 0 80px;
    background-color: #fff;
    color: red;
    font-size: 24px;
  }
  .pop {
    border-radius: 1px;
    height: 500px;
    margin: 0px 105px;
    margin-top: 300px;
    position: absolute;
    z-index: 2;
    top: 164px;
    box-shadow: 1px 1px 30px 8px #ffdedf;
    background-color: #fff;
    .buttons_1 {
      text-align: right;
    }
    .van-icon-cross:before {
      content: "\e6a7";
      font-size: 60px;
      margin-right: 17px;
    }

    .van-cell-group--inset {
      padding-top: 20px;
    }

    /deep/ .van-field__control {
      font-size: 40px;
      background-color: #e6e6e6;
      text-indent: 50px;
      height: 80px;
      margin-bottom: 34px;
      border-radius: 10px;
    }
    .van-cell-group--inset {
      margin: 0;
    }
    .van-field {
      padding: 10px 26px;
    }
    .van-button--primary {
      width: 213px;
      height: 70px;
      color: red;
    }
    .van-button__content {
      font-size: 28px;
    }
  }
  .van-row {
    .van-col--24 {
      margin: 0 auto;
      margin-top: 450px;
      text-align: center;
    }
    .van-col {
      text-align: center;
      color: #ff5555;
      font-size: 30px;
      margin-bottom: 25px;
      .van-hairline--top {
        margin-left: 40px;
      }
    }
  }
  .icon {
    text-align: center;
    .icon-weiliao {
      font-size: 70px;
    }
  }
  .van-icon-undefined {
    font-size: 80px;
    margin: 0 40px;
  }

  .icon-qq {
    font-size: 70px;
  }
}
</style>